<template>
  <div class="diary-page">
    <van-nav-bar 
      title="饮食日记" 
      :border="false"
      :safe-area-inset-top="true"
      class="custom-nav"
    />
    
    <!-- 日期选择器 -->
    <div class="date-picker">
      <div class="month-display">
        <span>{{ currentMonthDisplay }}</span>
        <span class="week-number">第{{ currentWeekNumber }}周</span>
      </div>
      <div class="week-controls">
        <van-icon name="arrow-left" class="week-arrow" @click="changeWeek(-1)" />
        <div class="week-view">
          <div v-for="(day, index) in weekDays" :key="index" 
               :class="['week-day', { active: day.date === currentDate }]"
               @click="selectDate(day.date)">
            <div class="week-name">{{ day.weekName }}</div>
            <div class="day-number">{{ day.dayNumber }}</div>
          </div>
        </div>
        <van-icon name="arrow" class="week-arrow" @click="changeWeek(1)" />
      </div>
    </div>

    <!-- 营养摄入总览 -->
    <div class="nutrition-overview">
      <div class="overview-header">
        <span class="overview-title">今日营养摄入</span>
        <span class="overview-date">{{ formatDisplayDate(currentDate) }}</span>
      </div>
      <div class="overview-content">
        <div class="overview-item">
          <div class="overview-value">{{ totalCalories }}</div>
          <div class="overview-label">卡路里</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">{{ totalProtein }}g</div>
          <div class="overview-label">蛋白质</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">{{ totalCarbs }}g</div>
          <div class="overview-label">碳水</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">{{ totalFat }}g</div>
          <div class="overview-label">脂肪</div>
        </div>
      </div>
    </div>

    <!-- 餐次记录 -->
    <div class="meal-sections">
      <div v-for="(meal, index) in meals" :key="index" class="meal-section">
        <div class="meal-header">
          <span class="meal-title">{{ meal.title }}</span>
          <van-button size="small" type="primary" class="add-btn" @click="showAddFood(meal.type)">
            <van-icon name="plus" class="add-icon" />
            添加
          </van-button>
        </div>
        
        <div class="food-list">
          <div v-for="food in meal.foods" :key="food.id" class="food-item" @click="editFood(food)">
            <img :src="food.img" class="food-img" />
            <div class="food-info">
              <div class="food-name">{{ food.name }}</div>
              <div class="food-nutrition">
                {{ food.calories }}大卡 | {{ food.amount }}{{ food.unit }}
              </div>
            </div>
            <van-icon name="delete" class="delete-btn" @click.stop="confirmDelete(food)" />
          </div>
          <div v-if="!meal.foods.length" class="empty-tip">
            <van-icon name="add-o" class="empty-icon" />
            <span>点击添加{{ meal.title }}食物</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加食物弹窗 -->
    <van-dialog 
      v-model:show="showAddDialog" 
      title="添加食物" 
      show-cancel-button 
      @confirm="confirmAddFood"
      class="custom-dialog"
    >
      <div class="add-food-form">
        <div class="ai-tip" v-if="showAiTip">
          <van-icon name="info-o" color="#7c5dfa" />
          <span>如果对食物的营养成分不清楚，可以咨询本系统的AI智能饮食助手</span>
          <van-icon name="cross" class="close-ai-tip" @click="hideAiTip" />
        </div>
        <van-field v-model="newFood.name" label="食物名称" placeholder="请输入食物名称" />
        <van-field v-model="newFood.amount" label="重量(克)" placeholder="请输入重量" type="number" />
        <van-field v-model="newFood.calories" label="卡路里" placeholder="请输入卡路里" type="number" />
        <van-field v-model="newFood.protein" label="蛋白质(克)" placeholder="请输入蛋白质含量" type="number" />
        <van-field v-model="newFood.carbs" label="碳水(克)" placeholder="请输入碳水含量" type="number" />
        <van-field v-model="newFood.fat" label="脂肪(克)" placeholder="请输入脂肪含量" type="number" />
        <div class="upload-section">
          <div class="upload-options">
            <template v-if="newFood.img.length === 0">
              <van-uploader 
                v-model="newFood.img" 
                :max-count="1" 
                :after-read="onFoodImgRead"
                class="custom-uploader"
                :preview-image="false"
              >
                <div class="upload-trigger">
                  <van-icon name="photograph" />
                  <span>从相册选择</span>
                </div>
              </van-uploader>
            </template>
            <template v-else>
              <div class="preview-container">
                <img :src="newFood.img[0].content" class="preview-image" />
                <van-icon name="clear" class="clear-icon" @click="clearImage" />
              </div>
            </template>
            <div class="ai-assistant-card" @click="goToAI">
              <van-icon name="chat-o" />
              <span>问问AI智能饮食助手</span>
            </div>
          </div>
        </div>
      </div>
    </van-dialog>

    <!-- 拍照弹窗 -->
    <van-popup v-model:show="showCamera" position="bottom" :style="{ height: '100%' }">
      <div class="camera-container">
        <div class="camera-header">
          <van-icon name="cross" @click="showCamera = false" />
          <span>拍照上传</span>
          <van-icon name="photograph" @click="switchCamera" />
        </div>
        <video ref="videoRef" class="camera-preview" autoplay playsinline></video>
        <div class="camera-controls">
          <van-button round icon="cross" @click="showCamera = false">取消</van-button>
          <div class="capture-btn" @click="takePhoto">
            <div class="capture-btn-inner"></div>
          </div>
          <van-button round icon="photograph" @click="switchCamera">切换</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 添加编辑食物弹窗 -->
    <van-dialog 
      v-model:show="showEditDialog" 
      title="编辑食物" 
      show-cancel-button 
      @confirm="confirmEditFood"
      class="custom-dialog edit-dialog"
    >
      <div class="add-food-form">
        <!-- <div class="form-header">
          <van-icon name="edit" class="form-icon" />
          <span class="form-title">编辑食物信息</span>
        </div> -->
        <div class="form-content">
          <van-field 
            v-model="currentEditingFood.name" 
            label="食物名称" 
            placeholder="请输入食物名称"
            class="custom-field"
          />
          <van-field 
            v-model="currentEditingFood.amount" 
            label="重量" 
            placeholder="请输入重量" 
            type="number"
            class="custom-field"
          >
            <template #right-icon>
              <span class="field-unit">克</span>
            </template>
          </van-field>
          <van-field 
            v-model="currentEditingFood.calories" 
            label="卡路里" 
            placeholder="请输入卡路里" 
            type="number"
            class="custom-field"
          >
            <template #right-icon>
              <span class="field-unit">大卡</span>
            </template>
          </van-field>
          <div class="nutrition-fields">
            <van-field 
              v-model="currentEditingFood.protein" 
              label="蛋白质" 
              placeholder="0" 
              type="number"
              class="custom-field nutrition-field"
            >
              <template #right-icon>
                <span class="field-unit">克</span>
              </template>
            </van-field>
            <van-field 
              v-model="currentEditingFood.carbs" 
              label="碳水" 
              placeholder="0" 
              type="number"
              class="custom-field nutrition-field"
            >
              <template #right-icon>
                <span class="field-unit">克</span>
              </template>
            </van-field>
            <van-field 
              v-model="currentEditingFood.fat" 
              label="脂肪" 
              placeholder="0" 
              type="number"
              class="custom-field nutrition-field"
            >
              <template #right-icon>
                <span class="field-unit">克</span>
              </template>
            </van-field>
          </div>
        </div>
      </div>
    </van-dialog>

    <!-- 添加删除确认弹窗 -->
    <van-dialog
      v-model:show="showDeleteConfirm"
      :show-confirm-button="false"
      :show-cancel-button="false"
      class="custom-dialog delete-dialog"
    >
      <div class="delete-confirm-content">
        <div class="delete-icon">
          <van-icon name="delete-o" class="warning-icon" />
        </div>
        
        <div class="delete-message">
          <h3>删除确认</h3>
          <p>确定要删除这个食物记录吗？</p>
        </div>

        <div class="delete-footer">
          <van-button 
            class="cancel-btn" 
            block 
            @click="showDeleteConfirm = false"
          >
            取消
          </van-button>
          <van-button 
            class="confirm-btn" 
            block 
            @click="handleDeleteConfirm"
          >
            删除
          </van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { db, STORES } from '../utils/db'
import { addDiaryRecord } from '../utils/nutritionSync'

const router = useRouter()
const currentDate = ref('')
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const currentMealType = ref('')
const weekDays = ref([])
const currentEditingFood = ref(null)

// 食物数据结构
const newFood = ref({
  name: '',
  amount: '',
  unit: '克',
  calories: '',
  protein: '',
  carbs: '',
  fat: '',
  img: []
})

// 餐次数据
const meals = ref([
  { title: '早餐', type: 'breakfast', foods: [] },
  { title: '午餐', type: 'lunch', foods: [] },
  { title: '晚餐', type: 'dinner', foods: [] },
  { title: '加餐', type: 'snack', foods: [] }
])

// 计算总营养摄入
const totalCalories = computed(() => {
  return meals.value.reduce((total, meal) => {
    return total + meal.foods.reduce((mealTotal, food) => mealTotal + Number(food.calories), 0)
  }, 0)
})

const totalProtein = computed(() => {
  return meals.value.reduce((total, meal) => {
    return total + meal.foods.reduce((mealTotal, food) => mealTotal + Number(food.protein), 0)
  }, 0)
})

const totalCarbs = computed(() => {
  return meals.value.reduce((total, meal) => {
    return total + meal.foods.reduce((mealTotal, food) => mealTotal + Number(food.carbs), 0)
  }, 0)
})

const totalFat = computed(() => {
  return meals.value.reduce((total, meal) => {
    return total + meal.foods.reduce((mealTotal, food) => mealTotal + Number(food.fat), 0)
  }, 0)
})

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 初始化日期
const initDate = () => {
  const now = new Date()
  currentDate.value = formatDate(now)
}

// 初始化周视图
const initWeekView = () => {
  const now = new Date()
  const currentDay = now.getDay() || 7 // 将周日的0转换为7
  const monday = new Date(now)
  monday.setDate(now.getDate() - currentDay + 1) // 设置为本周一

  weekDays.value = Array.from({ length: 7 }, (_, i) => {
    const date = new Date(monday)
    date.setDate(monday.getDate() + i)
    return {
      date: formatDate(date),
      weekName: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i],
      dayNumber: date.getDate()
    }
  })
}

// 切换周
const changeWeek = (weeks) => {
  const monday = new Date(weekDays.value[0].date)
  monday.setDate(monday.getDate() + weeks * 7)
  
  weekDays.value = Array.from({ length: 7 }, (_, i) => {
    const date = new Date(monday)
    date.setDate(monday.getDate() + i)
    return {
      date: formatDate(date),
      weekName: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i],
      dayNumber: date.getDate()
    }
  })
}

// 选择日期
const selectDate = (date) => {
  currentDate.value = date
  loadDiaryData()
}

// 加载日记数据
const loadDiaryData = async () => {
  const userEmail = localStorage.getItem('userEmail')
  if (!userEmail) return

  try {
    const diaryData = await db.getAll(STORES.DIARY_LIST)
    const todayDiary = diaryData.filter(item => 
      item.userEmail === userEmail && item.date === currentDate.value
    )

    // 重置餐次数据
    meals.value.forEach(meal => {
      meal.foods = todayDiary.filter(item => item.mealType === meal.type)
    })
  } catch (error) {
    console.error('加载日记数据失败:', error)
    showToast('加载数据失败')
  }
}

// 显示添加食物弹窗
const showAddFood = (mealType) => {
  currentMealType.value = mealType
  showAddDialog.value = true
}

// 相机相关
const showCamera = ref(false)
const videoRef = ref(null)
const stream = ref(null)
const facingMode = ref('environment') // 'environment' 后置摄像头, 'user' 前置摄像头

// 初始化相机
const initCamera = async () => {
  try {
    stream.value = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: facingMode.value }
    })
    if (videoRef.value) {
      videoRef.value.srcObject = stream.value
    }
  } catch (error) {
    console.error('相机初始化失败:', error)
    showToast('无法访问相机')
    showCamera.value = false
  }
}

// 切换相机
const switchCamera = async () => {
  if (stream.value) {
    stream.value.getTracks().forEach(track => track.stop())
  }
  facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
  await initCamera()
}

// 拍照
const takePhoto = () => {
  if (!videoRef.value) return
  
  const canvas = document.createElement('canvas')
  canvas.width = videoRef.value.videoWidth
  canvas.height = videoRef.value.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(videoRef.value, 0, 0)
  
  canvas.toBlob(blob => {
    const file = new File([blob], 'food-photo.jpg', { type: 'image/jpeg' })
    onFoodImgRead({ file })
    showCamera.value = false
  }, 'image/jpeg')
}

// 监听相机弹窗显示状态
watch(showCamera, (newVal) => {
  if (newVal) {
    nextTick(() => {
      initCamera()
    })
  } else {
    if (stream.value) {
      stream.value.getTracks().forEach(track => track.stop())
    }
  }
})

// 组件卸载时清理相机资源
onUnmounted(() => {
  if (stream.value) {
    stream.value.getTracks().forEach(track => track.stop())
  }
})

// 处理食物图片上传
const onFoodImgRead = (file) => {
  // 确保 file 对象有 content 属性
  if (file.file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      newFood.value.img = [{
        file: file.file,
        content: e.target.result
      }]
    }
    reader.readAsDataURL(file.file)
  } else {
    newFood.value.img = [file]
  }
}

// 添加清除图片的方法
const clearImage = () => {
  newFood.value.img = []
}

// 确认添加食物
const confirmAddFood = async () => {
  if (!newFood.value.name || !newFood.value.amount || !newFood.value.calories) {
    showToast('请填写完整信息')
    return
  }

  const userEmail = localStorage.getItem('userEmail')
  if (!userEmail) {
    showToast('请先登录')
    return
  }

  try {
    const foodData = {
      userEmail: userEmail,
      date: currentDate.value,
      mealType: currentMealType.value,
      name: newFood.value.name,
      amount: Number(newFood.value.amount),
      unit: newFood.value.unit,
      calories: Number(newFood.value.calories),
      protein: Number(newFood.value.protein) || 0,
      carbs: Number(newFood.value.carbs) || 0,
      fat: Number(newFood.value.fat) || 0,
      img: newFood.value.img[0]?.content || ''
    }

    const success = await addDiaryRecord(foodData)
    if (success) {
      showToast('添加成功')
      loadDiaryData()
      
      // 重置表单
      newFood.value = {
        name: '',
        amount: '',
        unit: '克',
        calories: '',
        protein: '',
        carbs: '',
        fat: '',
        img: []
      }
    } else {
      showToast('添加失败')
    }
  } catch (error) {
    console.error('添加食物失败:', error)
    showToast('添加失败')
  }
}

// 删除食物
const deleteFood = async (food) => {
  try {
    await db.delete(STORES.DIARY_LIST, food.id)
    showToast('删除成功')
    loadDiaryData()
  } catch (error) {
    console.error('删除食物失败:', error)
    showToast('删除失败')
  }
}

// 返回上一页
const goBack = () => router.back()

const currentMonthDisplay = computed(() => {
  if (!weekDays.value.length) return ''
  const date = new Date(weekDays.value[0].date)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  return `${year}年${month}月`
})

// 格式化显示日期
const formatDisplayDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}月${day}日`
}

// 计算当前是第几周
const currentWeekNumber = computed(() => {
  if (!weekDays.value.length) return 1
  const firstDay = new Date(weekDays.value[0].date)
  const firstDayOfMonth = new Date(firstDay.getFullYear(), firstDay.getMonth(), 1)
  const weekNumber = Math.ceil((firstDay.getDate() + firstDayOfMonth.getDay()) / 7)
  return weekNumber
})

// 控制 AI 提示的显示
const showAiTip = ref(true)

const hideAiTip = () => {
  showAiTip.value = false
}

const goToAI = () => {
  router.push('/ai')
}

onMounted(() => {
  initWeekView()
  initDate()
  loadDiaryData()
})

// 在 script setup 中添加新的状态和方法
const showDeleteConfirm = ref(false)
const foodToDelete = ref(null)

// 编辑食物
const editFood = (food) => {
  currentEditingFood.value = { ...food }
  showEditDialog.value = true
}

// 确认编辑食物
const confirmEditFood = async () => {
  if (!currentEditingFood.value.name || !currentEditingFood.value.amount || !currentEditingFood.value.calories) {
    showToast('请填写完整信息')
    return
  }

  try {
    const foodData = {
      ...currentEditingFood.value,
      amount: Number(currentEditingFood.value.amount),
      calories: Number(currentEditingFood.value.calories),
      protein: Number(currentEditingFood.value.protein) || 0,
      carbs: Number(currentEditingFood.value.carbs) || 0,
      fat: Number(currentEditingFood.value.fat) || 0
    }

    await db.put(STORES.DIARY_LIST, foodData)
    showToast('修改成功')
    loadDiaryData()
    showEditDialog.value = false
  } catch (error) {
    console.error('修改食物失败:', error)
    showToast('修改失败')
  }
}

// 确认删除
const confirmDelete = (food) => {
  foodToDelete.value = food
  showDeleteConfirm.value = true
}

// 处理删除确认
const handleDeleteConfirm = async () => {
  if (!foodToDelete.value) return
  
  try {
    await db.delete(STORES.DIARY_LIST, foodToDelete.value.id)
    showToast('删除成功')
    loadDiaryData()
  } catch (error) {
    console.error('删除食物失败:', error)
    showToast('删除失败')
  } finally {
    foodToDelete.value = null
    showDeleteConfirm.value = false
  }
}
</script>

<style scoped>
.diary-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f6ff 0%, #e9eafc 100%);
  padding-bottom: 60px;
}

.custom-nav {
  background: transparent !important;
}

.custom-nav :deep(.van-nav-bar__title) {
  color: #333;
  font-size: 17px;
  font-weight: 600;
}

.custom-nav :deep(.van-icon) {
  color: #333;
}

.date-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #fff;
  margin: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(124, 93, 250, 0.08);
}

.month-display {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.week-number {
  font-size: 12px;
  color: #7c5dfa;
  background: rgba(124, 93, 250, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: normal;
}

.week-controls {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.week-arrow {
  color: #7c5dfa;
  font-size: 14px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(124, 93, 250, 0.1);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-arrow:active {
  transform: scale(0.9);
  background: rgba(124, 93, 250, 0.2);
}

.week-view {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
  position: relative;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 32px;
  position: relative;
}

.week-day.active {
  background: linear-gradient(135deg, #7c5dfa 0%, #a48fff 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(124, 93, 250, 0.2);
}

.week-day.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #7c5dfa;
  border-radius: 50%;
}

.week-name {
  font-size: 11px;
  color: #666;
  margin-bottom: 2px;
}

.day-number {
  font-size: 13px;
  font-weight: bold;
}

.week-day.active .week-name,
.week-day.active .day-number {
  color: #fff;
}

.week-day.today {
  border: 1px solid #7c5dfa;
}

.nutrition-overview {
  background: #fff;
  margin: 0 10px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(124, 93, 250, 0.08);
  overflow: hidden;
}

.overview-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.overview-date {
  font-size: 12px;
  color: #666;
}

.overview-content {
  display: flex;
  justify-content: space-around;
  padding: 12px;
}

.overview-item {
  text-align: center;
  position: relative;
}

.overview-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #eee;
}

.overview-value {
  font-size: 16px;
  font-weight: bold;
  color: #7c5dfa;
  margin-bottom: 2px;
}

.overview-label {
  font-size: 12px;
  color: #666;
}

.meal-sections {
  padding: 0 10px;
}

.meal-section {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(124, 93, 250, 0.08);
}

.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.meal-title {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.add-btn {
  background: linear-gradient(135deg, #7c5dfa 0%, #a48fff 100%);
  border: none;
  border-radius: 20px;
  padding: 0 16px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}

.add-icon {
  font-size: 14px;
}

.food-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.food-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.food-item:hover {
  transform: translateX(4px);
  background: #f3f4f6;
}

.food-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  margin-right: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.food-info {
  flex: 1;
}

.food-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.food-nutrition {
  font-size: 14px;
  color: #666;
}

.delete-btn {
  position: relative;
  z-index: 2;
  color: #ff4d4f;
  font-size: 20px;
  padding: 8px;
  opacity: 0.8;
  transition: all 0.3s ease;
  cursor: pointer;
}

.delete-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #999;
  font-size: 14px;
  gap: 12px;
  background: #f8f9fa;
  border-radius: 16px;
}

.empty-icon {
  font-size: 28px;
  color: #ccc;
}

.custom-dialog :deep(.van-dialog) {
  width: 90% !important;
  max-width: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.custom-dialog :deep(.van-dialog__header) {
  font-weight: 600;
  padding: 16px 20px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.custom-dialog :deep(.van-dialog__content) {
  padding: 0;
}

.custom-dialog :deep(.van-dialog__footer) {
  padding: 12px 20px;
  border-top: 1px solid #f5f5f5;
}

.custom-dialog :deep(.van-button) {
  border-radius: 8px;
  font-weight: 500;
}

.custom-dialog :deep(.van-button--default) {
  color: #666;
  border-color: #eee;
}

.custom-dialog :deep(.van-button--primary) {
  background: linear-gradient(135deg, #7c5dfa 0%, #a48fff 100%);
  border: none;
}

.add-food-form {
  padding: 8px 12px 12px;
}

:deep(.van-field) {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

:deep(.van-field__label) {
  color: #666;
  font-weight: 500;
  font-size: 12px;
  width: 70px;
}

:deep(.van-field__control) {
  color: #333;
  font-size: 13px;
}

:deep(.van-field__placeholder) {
  font-size: 12px;
}

.upload-section {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

.upload-options {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: 100px;
  box-sizing: border-box;
  flex: 1;
}

.custom-uploader,
.preview-container {
  flex: 1 0 0%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  min-width: 0;
}

.preview-container {
  padding: 0;
}

.preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-assistant-card {
  flex: 1 0 0%;
  height: 100%;
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center;
  min-width: 0;
}

.upload-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  height: 100%;
}

.upload-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ai-assistant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.upload-trigger .van-icon {
  font-size: 24px;
  color: #7c5dfa;
}

.ai-assistant-card .van-icon {
  font-size: 24px;
  color: #fff;
}

.upload-trigger span {
  font-size: 14px;
  color: #333;
}

.ai-assistant-card span {
  font-size: 14px;
  color: #fff;
}

.clear-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 4px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-icon:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.camera-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.camera-header .van-icon {
  font-size: 20px;
  padding: 8px;
}

.camera-preview {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

.camera-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.capture-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.capture-btn-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.camera-controls .van-button {
  background: transparent;
  border: none;
  color: #fff;
}

.camera-controls .van-button .van-icon {
  font-size: 24px;
}

.ai-tip {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(124, 93, 250, 0.1);
  border-radius: 4px;
  margin: 0 16px 16px;
  font-size: 13px;
  color: #666;
  justify-content: space-between;
}

.ai-tip .van-icon {
  margin-right: 6px;
  font-size: 16px;
}

.ai-tip span {
  flex: 1;
  margin-right: 6px;
}

.close-ai-tip {
  font-size: 14px;
  color: #999;
  cursor: pointer;
  padding: 4px;
}

.close-ai-tip:hover {
  color: #666;
}

.delete-dialog :deep(.van-dialog) {
  width: 280px !important;
  max-width: 280px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.delete-confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

.delete-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.warning-icon {
  font-size: 32px;
  color: #ff4d4f;
}

.delete-message {
  text-align: center;
  margin-bottom: 24px;
}

.delete-message h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px;
}

.delete-message p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.delete-footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.delete-footer .van-button {
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.cancel-btn {
  background: #f5f5f5 !important;
  color: #666 !important;
}

.cancel-btn:active {
  background: #eee !important;
}

.confirm-btn {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.15);
}

.confirm-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(255, 77, 79, 0.15);
}
</style>